<template>
	<el-aside scroll-y="true"
		:style="'width: '+asideW+'px;transition: width 2s;height:calc(100vh - 60px);padding-top: 10px;border-right:1px solid #E9ECEF'">
		<view v-for="(item,index) in list" :key="index"
			style="margin: 0px;padding: 0px;overflow: hidden;min-width: 150px">
			<view :class="item.click?'dd':'gg'"
				:style="item.frist?'height: 30px; display: flex;justify-content: space-between;align-items: center;color:'+deepColor:'height: 39px; display: flex;justify-content: space-between;align-items: center;color:'+deepColor"
				@click="clicklist(item)">
				<view class="">
					<el-image :style="item.checked?'width: auto;height: 39px;':'width: auto;height: 39px;opacity: 0;'"
						src="/static/index/svg/select.svg" fit="fill"></el-image>
				</view>
				<view
					:style="item.checked?'margin-left: -10px;display: flex;justify-content: flex-start;align-items: center;background-color:#F2F2F2 ;width: 85%;border-radius: 4px;height: 100%;':'margin-left: -10px;display: flex;justify-content: flex-start;align-items: center;width: 85%;border-radius: 4px;height: 100%;'">
					<el-image v-if="!item.frist"
						:style="item.checked?'margin-left: 20px;width: 22px; height: auto;':'margin-left: 20px;width: 22px; height:auto;'"
						:src="'/static/index/svg'+(item.checked?'/select':'')+'/'+item.icon+'.svg'"
						fit="fill"></el-image>
					<view v-if="!item.frist"
						:style="item.checked?'margin-left: 20px;font-weight: bolder;font-size: 15px;':'margin-left: 20px;font-size: 15px;margin-right: 5%;'">
						{{item.name}}
					</view>
					<view v-if="item.frist" style="margin-left: 20px;font-size: 13px;margin-right: 5%;color: #999999;">
						{{item.name}}
					</view>
					<uv-line v-if="item.frist" length="60%" color="#ccc"></uv-line>
				</view>
				<view class=""></view>
			</view>
		</view>
		<uv-line style="margin-left: 10px;" length="90%" color="#ccc"></uv-line>
		<view
			:style="'display: flex;justify-content: flex-start;align-items: center;flex-wrap: wrap;height: auto;padding: 10px;color:'+shallowColor">
			<view v-if="!isPc" v-for="(item,index) in common_parameters" style="padding: 5px 10px;"
				@click="routed(item.url)">
				{{item.name}}
			</view>
			<el-link v-if="isPc" v-for="(item,index) in common_parameters" style="padding: 5px 10px;color: #999999;"
				:href="item.url" target="_blank" :disabled="item.url?false:true">{{item.name}}</el-link>
		</view>
	</el-aside>
</template>

<script>
	import config from '@/common/config'
	import {
		uploadFile
	} from '@/common/api.js';
	import helangCompress from '@/components/compress/compress.vue';
	export default {
		components: {
			// 注册组件
			helangCompress
		},
		props: {
			minWidth: {
				type: [Number, String],
				default: 1
			},
			aside: {
				type: Boolean,
				default: true
			},
			asideW: {
				type: Number,
				default: 200
			},
			deepColor: {
				type: String,
				default: '#4D4D4D'
			},
			shallowColor: {
				type: String,
				default: '#808080'
			},
			lightColor: {
				type: String,
				default: '#ccc'
			},
		},
		data() {
			return {
				env: config.env,
				list: [{
						name: '探索',
						icon: 'index',
						frist: true,
						checked: false
					},
					{
						name: 'AI-作品',
						icon: 'works',
						checked: false,
						click: '/'
					},
					{
						name: '教程专区',
						icon: 'tutorial',
						checked: false,
					},
					{
						name: '活动商机',
						icon: 'opportunities',
						checked: false
					},
					{
						name: '工具',
						icon: 'index',
						frist: true,
						checked: false,
						click: '/'
					},
					{
						name: 'AI-对话',
						icon: 'dialogue',
						click: '/pages/chat/index',
						checked: false,
					},
					{
						name: 'AI-写作',
						icon: 'writing',
						click: '/pages/chat/index',
						checked: false
					},
					{
						name: 'AI-识别',
						icon: 'distinguish',
						checked: false
					},
					{
						name: 'AI-图片',
						icon: 'picture',
						click: '/pages/painting/index',
						checked: false
					},
					{
						name: 'AI-视频',
						icon: 'video',
						click: '/pages/video/index',
						checked: false
					},
					{
						name: 'AI-音频',
						icon: 'audio',
						checked: false
					},
					// {
					// 	name: '管理',
					// 	icon: 'index',
					// 	frist: true,
					// 	checked: false
					// },
					// {
					// 	name: '个人中心',
					// 	icon: 'center',
					// 	checked: false
					// },
					// {
					// 	name: '会员计划',
					// 	icon: 'vip',
					// 	checked: false
					// },
					// {
					// 	name: '账单账户',
					// 	icon: 'billing',
					// 	checked: false
					// },
					// {
					// 	name: '消费记录',
					// 	icon: 'consumption',
					// 	checked: false
					// },
					// {
					// 	name: '关联账户',
					// 	icon: 'account',
					// 	checked: false
					// },
					// {
					// 	name: '个人资产',
					// 	icon: 'assets',
					// 	checked: false
					// },
					{
						name: '平台',
						icon: 'index',
						frist: true,
						checked: false
					},
					{
						name: '官方平台',
						icon: 'official',
						checked: false
					},
					{
						name: '咨询官方',
						icon: 'consult',
						checked: false
					}
				],
				common_parameters: [
					// 	{
					// 	name: '微信公众号',
					// 	icon: 'index',
					// 	checked: true
					// }, {
					// 	name: '小红书',
					// 	url: 'https://www.xiaohongshu.com',
					// }, {
					// 	name: '抖音',
					// 	url: 'https://www.douyin.com',
					// }, {
					// 	name: 'B站',
					// 	url: 'https://www.bilibili.com',
					// }, {
					// 	name: '用户协议',
					// 	icon: 'index',
					// }, {
					// 	name: '隐私政策',
					// 	icon: 'index',
					// }, {
					// 	name: '关于我们',
					// 	icon: 'index',
					// },
					{
						name: 'www.readend.com 2024 © All rights Reserved',
						icon: 'index',
					}, {
						name: '粤ICP备16085192号',
						url: 'https://beian.miit.gov.cn',
					}
				],
			}
		},
		onLoad() {},
		watch: {
			// 监听data数据的变化
			obj(newVal, oldVal) {
				this.$emit('obj', newVal);
			},
		},
		mounted() {},
		methods: {
			clicklist(ite) {
				if (ite.frist) {
					return;
				}
				if (ite.click) this.routed(ite.click);
				// this.list.map((item, index) => {
				// 	item.checked = item.name === ite.name ? true : false
				// })

			},
			routed(url) {
				// console.log('routed', url)
				uni.$uv.route({
					url: url + '?_=' + uni.$uv.random(0,999),
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.dd {
		cursor: pointer;
	}

	.gg {
		opacity: 0.5;
	}

	.header-sticky-top {
		// height: 39px;
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		/* 粘性定位的容器距离顶部的距离 */
		background-color: #fff;
		z-index: 10;
		/* 确保菜单在页面内容之上 */
	}
</style>